import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/tools.dart';

class ReceiveAddressAddController extends GetxController {
  List<String> tags = ['公司', '家', '学校', '父母', '朋友'];

  RxInt tagIdx = RxInt(-1);
}

class ReceiveAddressAddPage extends GetView<ReceiveAddressAddController> {
  const ReceiveAddressAddPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(ColorsUtils.colorF7f7),
      appBar: AppBar(
        leading: IconButton(
          onPressed: Get.back,
          icon: Icon(
            CupertinoIcons.chevron_back,
            size: 20.sp,
            color: HexColor(ColorsUtils.color0000),
          ),
        ),
        title: Text(
          '新增收货地址',
          style: StylesUtils.customTextStyle(
            fontSize: StylesUtils.fontSize16,
            fontWeight: FontWeight.w700,
            color: ColorsUtils.color0000,
          ),
        ),
        centerTitle: true,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        backgroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 15),
              color: Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
              child: Column(
                children: [
                  SizedBox(
                    height: 65,
                    child: Row(
                      children: [
                        Container(
                          width: 80,
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '收货人',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: TextField(
                              cursorHeight: 20,
                              cursorWidth: 3,
                              cursorRadius: const Radius.circular(2),
                              cursorColor: HexColor(ColorsUtils.colorFf64),
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                              textAlign: TextAlign.left,
                              textAlignVertical: TextAlignVertical.center,
                              textDirection: TextDirection.ltr,
                              decoration: InputDecoration(
                                hintText: '请输入收货人姓名',
                                hintStyle: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color9999,
                                ),
                                filled: true,
                                fillColor: HexColor(ColorsUtils.colorF7f7),
                                isDense: true,
                                isCollapsed: true,
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 20),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                constraints: const BoxConstraints.expand(
                                    width: 270, height: 50),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 65,
                    child: Row(
                      children: [
                        Container(
                          width: 80,
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '手机号码',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: TextField(
                              cursorHeight: 20,
                              cursorWidth: 3,
                              cursorRadius: const Radius.circular(2),
                              cursorColor: HexColor(ColorsUtils.colorFf64),
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                              textAlign: TextAlign.left,
                              textAlignVertical: TextAlignVertical.center,
                              textDirection: TextDirection.ltr,
                              keyboardType: TextInputType.phone,
                              decoration: InputDecoration(
                                hintText: '请输入收货人手机号码',
                                hintStyle: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color9999,
                                ),
                                filled: true,
                                fillColor: HexColor(ColorsUtils.colorF7f7),
                                isDense: true,
                                isCollapsed: true,
                                prefixIconConstraints:
                                    const BoxConstraints.expand(
                                        height: 50, width: 70),
                                prefixIcon: Container(
                                  alignment: Alignment.center,
                                  child: Text.rich(
                                    TextSpan(
                                      children: [
                                        TextSpan(
                                          text: '+86 ',
                                          style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize16,
                                            color: ColorsUtils.color0000,
                                          ),
                                        ),
                                        WidgetSpan(
                                            child: Icon(
                                              CupertinoIcons.chevron_down,
                                              color: HexColor(
                                                  ColorsUtils.color9999),
                                              size: 14,
                                            ),
                                            alignment:
                                                PlaceholderAlignment.middle),
                                      ],
                                    ),
                                  ),
                                ).onTap(() {}),
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 20),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                constraints: const BoxConstraints.expand(
                                    width: 270, height: 50),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 65,
                    child: Row(
                      children: [
                        Container(
                          width: 80,
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '收货地址',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: TextField(
                              cursorHeight: 20,
                              cursorWidth: 3,
                              cursorRadius: const Radius.circular(2),
                              cursorColor: HexColor(ColorsUtils.colorFf64),
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                              textAlign: TextAlign.left,
                              textAlignVertical: TextAlignVertical.center,
                              textDirection: TextDirection.ltr,
                              readOnly: true,
                              decoration: InputDecoration(
                                hintText: '点击选择后货地址',
                                hintStyle: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color9999,
                                ),
                                filled: true,
                                fillColor: HexColor(ColorsUtils.colorF7f7),
                                isDense: true,
                                isCollapsed: true,
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 20, horizontal: 20),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                constraints: const BoxConstraints.expand(
                                    width: 270, height: 50),
                                suffixIconConstraints:
                                    const BoxConstraints.expand(
                                        width: 50, height: 50),
                                suffixIcon: Center(
                                  child: Icon(
                                    CupertinoIcons.placemark_fill,
                                    size: 20,
                                    color: HexColor(ColorsUtils.colorFf64),
                                  ),
                                ),
                              ),
                              onTap: () {
                                Get.toNamed(Routes.mineReceiveAddressMap);
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 65,
                    child: Row(
                      children: [
                        Container(
                          width: 80,
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '楼号门牌',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: TextField(
                              cursorHeight: 20,
                              cursorWidth: 3,
                              cursorRadius: const Radius.circular(2),
                              cursorColor: HexColor(ColorsUtils.colorFf64),
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color0000,
                              ),
                              textAlign: TextAlign.left,
                              textAlignVertical: TextAlignVertical.center,
                              textDirection: TextDirection.ltr,
                              decoration: InputDecoration(
                                hintText: '例如：12号楼806室',
                                hintStyle: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize15,
                                  color: ColorsUtils.color9999,
                                ),
                                filled: true,
                                fillColor: HexColor(ColorsUtils.colorF7f7),
                                isDense: true,
                                isCollapsed: true,
                                contentPadding: const EdgeInsets.symmetric(
                                    vertical: 15, horizontal: 20),
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10),
                                  borderSide: BorderSide.none,
                                ),
                                constraints: const BoxConstraints.expand(
                                    width: 270, height: 50),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 65,
                    child: Row(
                      children: [
                        Container(
                          width: 80,
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '楼号门牌',
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              color: ColorsUtils.color0000,
                            ),
                          ),
                        ),
                        Expanded(
                          child: Container(
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 10,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              alignment: WrapAlignment.start,
                              children: controller.tags
                                  .asMap()
                                  .map(
                                    (key, str) => MapEntry(
                                      key,
                                      Builder(builder: (_) {
                                        final style =
                                            StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize13,
                                          color: ColorsUtils.color7979,
                                        );
                                        double w =
                                            ToolsUtils.calculateTextWidth(
                                                    style: style, value: str) +
                                                20;
                                        return Obx(
                                          () => Container(
                                            constraints: BoxConstraints.expand(
                                                width: w > 45 ? w : 45,
                                                height: 25),
                                            alignment: Alignment.center,
                                            decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(13),
                                              color:
                                                  controller.tagIdx.value == key
                                                      ? ColorsUtils.rgba(
                                                          254, 70, 1, 1)
                                                      : ColorsUtils.rgba(
                                                          247, 247, 247, 1),
                                            ),
                                            child: Text(
                                              str,
                                              style: controller.tagIdx.value !=
                                                      key
                                                  ? style
                                                  : StylesUtils.customTextStyle(
                                                      fontSize: StylesUtils
                                                          .fontSize13,
                                                    ),
                                            ),
                                          ).onTap(() {
                                            controller.tagIdx.value = key;
                                          }),
                                        );
                                      }),
                                    ),
                                  )
                                  .values
                                  .toList(),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 15),
              color: Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
              child: Column(
                children: [
                  Row(
                    children: [
                      Container(
                        width: 80,
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '收货人',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize15,
                            color: ColorsUtils.color0000,
                          ),
                        ),
                      ),
                      Expanded(
                        child: Center(
                          child: TextField(
                            cursorHeight: 20,
                            cursorWidth: 3,
                            cursorRadius: const Radius.circular(2),
                            cursorColor: HexColor(ColorsUtils.colorFf64),
                            style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              color: ColorsUtils.color0000,
                            ),
                            textAlign: TextAlign.left,
                            textAlignVertical: TextAlignVertical.center,
                            textDirection: TextDirection.ltr,
                            minLines: 5,
                            maxLines: 10,
                            decoration: InputDecoration(
                              hintText:
                                  '粘贴或输入整段地址，点击“识别”自动拆分填充表单。格式：张三，13612345678，北京市东城区某街道某大厦12号',
                              hintStyle: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize15,
                                color: ColorsUtils.color9999,
                              ),
                              filled: true,
                              fillColor: HexColor(ColorsUtils.colorF7f7),
                              isDense: false,
                              isCollapsed: false,
                              contentPadding: const EdgeInsets.symmetric(
                                  vertical: 10, horizontal: 20),
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                                borderSide: BorderSide.none,
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                                borderSide: BorderSide.none,
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                                borderSide: BorderSide.none,
                              ),
                              constraints: const BoxConstraints(
                                  maxWidth: 270, minHeight: 100, minWidth: 270),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 10),
                    alignment: Alignment.centerRight,
                    child: Wrap(
                      spacing: 20,
                      crossAxisAlignment: WrapCrossAlignment.center,
                      alignment: WrapAlignment.end,
                      children: [
                        Text(
                          '清空',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize13,
                            color: ColorsUtils.colorFf64,
                          ),
                        ),
                        Container(
                          alignment: Alignment.center,
                          constraints: const BoxConstraints.expand(
                              width: 40, height: 20),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: HexColor(ColorsUtils.colorFf64),
                            ),
                            borderRadius: BorderRadius.circular(3),
                          ),
                          child: Text(
                            '识别',
                            style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorFf64,
                              fontSize: StylesUtils.fontSize13,
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
